<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>hello vue</title>
</head>

<body>
    <div id="app">
        <div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
        <!-- 2 父组件用v-on 监听子组件的事件
            这里 enlarge-text  是从 $emit 中的第一个参数对应   handle 为对应的事件处理函数	
        -->
        <menu-item :parr='parr' @enlarge-text='handle($event)'></menu-item>
    </div>

    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        /*
          子组件向父组件传值-携带参数
        */
        Vue.component('menu-item', {
            props: ['parr'],
            template: `
            <div>
                <ul>
                    <li :key='index' v-for='(item,index) in parr'>{{item}}</li>
                </ul>
                <button @click='$emit("enlarge-text", 5)'>加大字号</button>
                <button @click='$emit("enlarge-text", 10)'>加大字号</button>
            </div>
            `
        });

        var vm = new Vue({
            el: '#app',
            data: {
                pmsg: '父组件内容',
                fontSize: 10,
                parr: ['apple', 'orange', 'banana'],
            },
            methods: {
                handle: function (val) {
                    this.fontSize += val;
                }
            }
        });
    </script>
</body>

</html>